<template>
  <div class="dashboard-container">

    <el-row>
      <!-- 机构概述 -->
      <el-col :span="14">
        <div class="grid-content bg-purple">
          <div class="one">
            <p>机构概述</p>
            <div class="one-content">
              <div class="one-content-left">
                <div class="name">西三旗分拣中心</div>
                <div class="address">地址：北京顺义区天澜综合保税区123号</div>
                <div class="duty-people">负责人：赵五金 16712345678</div>
                <div class="search-department el-button">查看营业部分布</div>
              </div>
              <div class="one-content-right">
                <div class="item">
                  <div>
                    <div class="label">分拣中心(个)</div>
                    <div class="num">1</div>
                  </div>
                </div>
                <div class="item">
                  <div>
                    <div class="label">营业部(个)</div>
                    <div class="num">4</div>
                  </div>
                </div>
                <div class="item">
                  <div>
                    <div class="label">司机人数(人)</div>
                    <div class="num">48</div>
                  </div>
                </div>
                <div class="item">
                  <div>
                    <div class="label">快递员人数(人)</div>
                    <div class="num">64</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <!-- 今日数据 -->
      <el-col :span="10">
        <div class="grid-content bg-purple-light">
          <div class="two">
            <div class="header">
              <p>今日数据</p>
              <div class="refresh-box">
                2023-05-18 20:51
              </div>
            </div>
            <div class="content">
              <div class="item">
                <div class="label">订单金额(元)</div>
                <div class="value">2,284</div>
                <div class="bottom">较昨日 +342</div>
              </div>
              <div class="item">
                <div class="label">订单金额(元)</div>
                <div class="value">193</div>
                <div class="bottom">较昨日 +342</div>
              </div>
              <div class="item">
                <div class="label">订单金额(元)</div>
                <div class="value">38</div>
                <div class="bottom">较昨日 +342</div>
              </div>
            </div>

          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <!-- 待办任务 -->
      <el-col :span="14">
        <div class="grid-content bg-purple" style="height:300px">
          <div class="text-header">
            <div class="todoTasks">待办任务</div>
            <div class="refresh-box">
              2023-05-18 20:51 - 2023-05-20 23:59
            </div>
          </div>
          <!-- 4个球 -->
          <fourball id="main" />
        </div>
      </el-col>
      <!-- 执行中任务 -->
      <el-col :span="10">
        <div class="grid-content bg-purple-light" style="height:300px">
          <div class="text-header">
            <div class="todoTasks">执行中任务</div>
            <div class="refresh-box">
              2023-05-18 20:51
            </div>
          </div>
          <!-- 两个球 -->
          <ball id="main" />
        </div>
      </el-col>
    </el-row>
    <el-row>
      <!-- 常用功能 -->
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <div class="five">
            <p>常用功能</p>
            <div class="useFeaturelist">
              <div class="item">
                <img src="../../assets/picture/kauidi.png">
                <p>快递作业</p>
              </div>
              <div class="item">
                <img src="../../assets/picture/yun.png">
                <p>运输任务</p>
              </div>
              <div class="item">
                <img src="../../assets/picture/xian.png">
                <p>线路管理</p>
              </div>
              <div class="item">
                <img src="../../assets/picture/che.png">
                <p>车辆管理</p>
              </div>
              <div class="item">
                <img src="../../assets/picture/si.png">
                <p>司机管理</p>
              </div>
              <div class="item">
                <img src="../../assets/picture/yunfei.png">
                <p>运费查询</p>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="14"><div class="grid-content bg-purple" style="height:400px" /></el-col>
      <el-col :span="10"><div class="grid-content bg-purple-light" style="height:400px" /></el-col>
    </el-row>
    <el-row>
      <el-col :span="14"><div class="grid-content bg-purple" style="height:500px" /></el-col>
      <el-col :span="10"><div class="grid-content bg-purple-light" style="height:500px" /></el-col>
    </el-row>
    <!-- </div> -->
  </div>
</template>

<script>
import { menu } from '@/api/user'
import { mapGetters } from 'vuex'
import fourball from '@/components/FourBall'
import ball from '@/components/Ball'

export default {
  name: 'Dashboard',
  components: {
    ball, fourball
  },
  data() {
    return {

    }
  },
  computed: {
    ...mapGetters([

    ])
  },
  created() {
    this.getmenu()
  },
  methods: {
    // 查询用户可用的所有菜单
    async getmenu() {
      await menu()
      // console.log(res.data.data)
    }
  }

}
</script>

<style lang="scss" scoped>
.dashboard-container {
  margin: 20px;
  margin-top: 0px;

   .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
    //待办任务
    #main{
      margin-top: 20px;
    }
  }
  .el-col {
    border-radius: 4px;
    .text-header{
      // padding: 20px;
      display: flex;
      justify-content: space-between;
      .todoTasks{
        font-size: 16px;
        font-weight: 700;
        .refresh-box{
          color:#818693;
          font-size: 14px;
        }
      }
    }
  }
  .bg-purple-dark {
    background: #fff;
    height: 190px;
  }
  .bg-purple {
    background: #fff;
    // width: 735px;
    height: 240px;
  }
  .bg-purple-light {
    background: #fff;
    margin-left: 15px;
    height: 240px;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    padding: 23px 20px;
    //机构概述
    .one{
      p{
        font-size: 16px;
        font-weight: bold;
        margin-top: 0px;
      }
      .one-content{
        display: flex;
        justify-content:space-around;

        .one-content-left{
        padding-left:10px ;
        border-right: 1px solid #ebeef5;
        flex: 50%;
        .name{
          font-size: 16px;
          margin-top: 20px;
          margin-bottom: 13px;
        }
        .address{
          font-size: 14px;
          margin-bottom: 8px;
          color:#818693;
        }
        .duty-people{
          font-size: 14px;
          margin-bottom: 23px;
          color:#818693;
        }
        .search-department{
          font-size: 14px;
          color: #e15536;
          width: 158px;
          height: 40px;
          background: #ffeeeb;
          border: 1px solid #f3917c;
          border-radius: 4px;
          cursor: pointer;
        }
      }
        .one-content-right{
          flex: 50%;
          display: flex;
          flex-wrap: wrap;
          // 主轴上两端对齐
          justify-content: space-between;
          // 副轴上两端对齐
          align-content: space-between;

          .item{
            width: 50%;
            height: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            div{
              .label{
                font-size: 14px;
                margin-bottom: 10px;
              }
              .num{
                font-size: 32px;
                font-weight: bold;
                color: #e15536;
              }
            }
          }
        }
      }
    }
    //今日数据
    .two{
      .header{
        display: flex;
        justify-content: space-between;
        p{
          margin-top: 0px;
          font-size: 16px;
          font-weight: bold;
        }
        //日期
        .refresh-box{
          font-size: 14px;
          color: #818693;
        }
      }
      .content{
         display: flex;
         justify-content: space-around;
         margin-top: 16px;
         padding-left: 10px;

       .item{
         display: flex;
         flex-direction: column;
         align-items: center;

        .label{
          font-size: 14px;
          color: #20232a;
          margin-bottom: 21px;
        }
        .value{
          font-size: 36px;
          color: #20232a;
          font-weight: 700;
          margin-bottom: 24px;
        }
        .bottom{
          font-size: 14px;
          color: #818693;
          margin-bottom: 20px;
        }
       }
      }
    }
    //常用功能
    .five{
      p{
        font-size: 16px;
        font-weight: 700;
        margin-top: 0;
      }
      .useFeaturelist{
        display: flex;
        justify-content: space-between;
        .item{
          width: 15.15%;
          height: 116px;
          background: #fafafb;
          border-radius: 10px;
          cursor: pointer;
          text-align: center;
         img{
          width: 40px;
          height: 40px;
          margin-top: 20px;
         }
         p{
          margin-top:15px;
         }
        }
      }
    }
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  }

</style>
